<template>
  <div class="h-100%">
    <div class="h-100% main-scene" ref="canvas"></div>
  </div>
</template>
<script setup>
import * as THREE from "three";
import { Water } from 'three/examples/jsm/objects/Water.js';
import { onMounted, ref } from "vue";
import { getTexture, addMeshLight } from '@/utils/threeUtils'

import bqj from "@/assets/images/bqj.png"
import waternormals from "@/assets/images/waternormals.jpg"

import SceneMap from '@/utils/startMap'

const canvas = ref(null)
const map = ref(null)
const water = ref(null)

onMounted(async () => {
  canvasInit();
})

const canvasInit = async () => {
  map.value = new SceneMap(canvas.value)
  map.value.addControls()
  // map.value.createAxisHelper()
  map.value.init()

  const geometry = new THREE.BoxGeometry(664 * 0.22, 1313 * 0.22, 1);
  const material = new THREE.MeshBasicMaterial({ map: await getTexture(bqj, { repeat: { x: -1, y: 1 } }), color: 0xffffff });
  const cube = new THREE.Mesh(geometry, material);
  addMeshLight(material, 2)
  // material.color.set();
  cube.rotation.x = - Math.PI / 2;
  cube.position.set(0, 100, 0)
  map.value.addMesh(cube)

  const waterGeometry = new THREE.PlaneGeometry(66.4, 131.3);
  water.value = new Water(
    waterGeometry,
    {
      textureWidth: 1024, // 提高分辨率
      textureHeight: 1024,
      waterNormals: await getTexture(waternormals),
      sunDirection: new THREE.Vector3(),
      sunColor: 0xffffff,
      waterColor: 0x001e0f,
      distortionScale: 1,
    }
  );
  water.value.rotation.x = - Math.PI / 2;
  map.value.addMesh(water.value)
  map.value.renderAdd(waterAni)
}

const waterAni = () => {
  water.value.material.uniforms["time"].value += 1.0 / 60.0;
}


</script>

<style lang="postcss" scoped>
.main-scene {
  height: 100%;
  background-color: var(--block-light-color);
}
</style>
